<template>
  <div>
    <el-card shadow="hover" class="content">
      <div class="content_header">
        <div class="header_info">
          <el-input placeholder="请输入客户名..." v-model="searchCustomer">
          </el-input>
        </div>
        <div class="header_info">
          <el-button
            @click="selectCustomersByName"
            class="search_customer_btn"
            type="primary"
            icon="el-icon-search"
            >搜索</el-button
          >

          <el-button
            @click="selectAllCustomers"
            class="search_customer_btn"
            type="primary"
            icon="el-icon-refresh"
            >刷新</el-button
          >
        </div>
      </div>
      <div class="content_body">
        <el-table :data="customers" border style="width: 100%">
          <el-table-column prop="customername" :width="width" label="客户名">
          </el-table-column>

          <el-table-column prop="username" :width="width" label="用户名">
          </el-table-column>

          <el-table-column
            prop="customerorgan"
            label="所属机构"
            width="200px"
          ></el-table-column>

          <el-table-column
            prop="customeraddress"
            label="地址信息"
            width="200px"
          ></el-table-column>

          <el-table-column
            prop="customerphone"
            label="联系电话"
            :width="width"
          ></el-table-column>

          <el-table-column prop="undertaker" label="承保人"></el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          background
          @current-change="handleCurrentChange"
          :current-page="currentPageNumber"
          :page-size="currentPageSize"
          layout="prev, pager, next"
          :total="100"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { selectAllCustomers, selectCustomersByName } from "../../api/admin";
import baseMixin from "../../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  components: {},
  data() {
    return {
      searchCustomer: "",
      currentPageNumber: 1,
      currentPageSize: 8,
      customers: [],
      width: "100px",
    };
  },
  methods: {
    async selectCustomersByName() {
      let customername = this.searchCustomer;
      if (customername === "") {
        this.$message.error("请输入客户名...");
        return;
      }
      await selectCustomersByName(
        customername,
        this.currentPageNumber,
        this.currentPageSize
      )
        .then((res) => {
          this.customers = res.data.list;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    async selectAllCustomers() {
      await selectAllCustomers(this.currentPageNumber, this.currentPageSize)
        .then((res) => {
          this.customers = res.data.list;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    handleCurrentChange(value) {
      this.currentPageNumber = value;
      this.selectAllCustomers();
    },
  },
  created() {
    this.selectAllCustomers();
  },
};
</script>

<style lang="scss">
@import "../../assets/css/global.scss";
@import "../../assets/css/admin_management.css";
</style>